<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=pt-BR"></script>
<script type="text/javascript">
  var map;
  var marker;
  var line;
  var poly;
  var info;
  
  function initialize() {
    var latlng = new google.maps.LatLng(-7.232604194138538, -35.8865647578125);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }
  
  function addMarker(){
	  var location = new google.maps.LatLng(-7.232604194138538, -35.8865647578125);
	  if(!marker){
		  marker = new google.maps.Marker({
			  position: location,
			  title: "Marker",
			  map: map
		  });	  
	  }else{
		  marker.setMap(null);
		  marker = null;
	  } 
  }
  
  function addPolyline(){
	  var coordinates = [
						new google.maps.LatLng(-6.621863929463133,-37.1829514765625),
						new google.maps.LatLng(-6.970955418356928,-37.0511155390625),
						new google.maps.LatLng(-6.894613417862228,-36.3919358515625),
						new google.maps.LatLng(-7.4131213,-35.2520125)
						];
	  if(!line){
		  line = new google.maps.Polyline({
			  path: coordinates,
			  strokeColor: "#FF0000",
			  strokeOpacity: 1.0,
			  strokeWeight: 2,
			  map: map
		  }); 
	  }else{
		  line.setMap(null);
		  line = null;
	  }
  }
  
  function addPolygon(){
	  var coordinates = [
						new google.maps.LatLng(-7.515885848985135,-36.9522385859375),
						new google.maps.LatLng(-8.07101101191672,-36.9522385859375),
						new google.maps.LatLng(-7.896933685906198,-35.9964280390625),
						new google.maps.LatLng(-7.390610566759405,-36.0074143671875),
						new google.maps.LatLng(-7.515885848985135,-36.9522385859375)
  						];
	  if(!poly){
		  poly = new google.maps.Polygon({
			  paths: coordinates,
			  strokeColor: "#FF0000",
			  strokeOpacity: 0.8,
			  strokeWeight: 2,
			  fillColor: "#FF0000",
			  fillOpacity: 0.35,
			  map: map
		  });
	  }else{
		  poly.setMap(null);
		  poly = null;
	  }
  }
  
  function addInfoWindow(){
	  var coordinate = new google.maps.LatLng(-7.2171402,-35.9106401);
	  if(!info){
		  info = new google.maps.InfoWindow(
				 { content: 'A UFCG fica aqui!',
				   size: new google.maps.Size(50,50),
				   position: coordinate
				 });
		  info.open(map);
	  }else{
		  info.close();
		  info = null;
	  }
  }

</script>
</head>
<body onload="initialize()">
  <table style="width:100%; height:100%" border="1">
  	<tr>
  		<td style="width:30%; height:100%">
  			<div id="map_control" style="width:100%; height:100%">
  				<table style="width:30%; height:20%">
  					<tr>
  						<td>
  							<input type="button" value="Marker" onclick="addMarker()" />
  						</td>
  					</tr>
  					<tr>
  						<td>
  							<input type="button" value="Polyline" onclick="addPolyline()" />
  						</td>
  					</tr>
  					<tr>
  						<td>
  							<input type="button" value="Polygon" onclick="addPolygon()" />
  						</td>
  					</tr>
  					<tr>
  						<td>
  							<input type="button" value="InfoWindow" onclick="addInfoWindow()" />
  						</td>
  					</tr>
  				</table>
  			</div>
  		</td>
  		<td style="width:70%; height:100%">
  			<div id="map_canvas" style="width:100%; height:100%"></div>
  		</td>
  	</tr>
  </table>
</body>
</html>